<template>
  <div>
    <Category :scene="0" />
    <el-card>
      <div v-show="scene == 0">
        <el-button
          @click="handleClick"
          type="primary"
          size="default"
          icon="Plus"
          :disabled="categoryStore.c2Id ? false : true"
          >添加</el-button
        >
        <el-table :data="records" style="width: 100%">
          <el-table-column prop="id" label="序号" width="120" />
          <el-table-column prop="name" label="名称" width="120" />
          <el-table-column prop="parentId" label="父节点" width="120" />
          <el-table-column prop="status" label="状态" width="100" />
          <el-table-column prop="createTime" label="创建时间" width="120" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="deleteClick(scope.row.id)"
                >删除</el-button
              >
              <el-button link type="primary" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import useCategoryStore from "@/store/modules/category";

import { getResourceThree, deleteResource } from "@/api/classification";
import { ResourceData, classifyInfo } from "@/api/classification/type";

let categoryStore = useCategoryStore();

let scene = ref<number>(0); //0:  1:添加或者修改已有SPU 2:添加SKU的结构

let records = ref<classifyInfo[]>();

function handleClick() {
  handleData();
}

function updateData() {
  handleData();
}

//监听二级分类ID变化
watch(
  () => categoryStore.c3Id,
  () => {
    //当三级分类发生变化的时候清空对应的数据
    records.value = [];
    //务必保证有三级分类ID
    if (!categoryStore.c3Id) return;
    handleData();
  }
);

//删除
async function deleteClick(id: number) {
  await ElMessageBox.confirm("确认删除用户?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteResource(id).then(() => {
      ElMessage.success("删除成功");
      updateData();
    });
  });
}

/**
 * 获取分类数据
 */
async function handleData() {
  await getResourceThree(categoryStore.c2Id)
    .then(({ data }) => {
      records.value = data.resourceTypes;
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {});
}

onMounted(() => {
  handleData();
});
</script>

<!-- <style scoped></style> -->
